import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import {
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import LTable from "@/components/public/lTable/lTable";
import threeLevelChannelService from "@/modules/channelManagement/threeLevelChannel.service";
import threeLevelChannelPageAuth from "./threeLevelPage.auth";
import Add from "./popup/add/add";
import { $getChannelAllList } from "@/api/search/search";
import SearchQRcode from "./popup/searchCode/searchQRcode";
import useNavigator from "@/hooks/useNavigator";
import { useStore as useUserStore } from "@/store/user";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import {$channelResetPassword} from "@/api/channel/channel";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const addRef = ref(null as any);
    const qrcodeRef = ref(null as any);
    const userStore = useUserStore();
    const state = reactive({
      toolbar: {
        left: (userStore.channel_level < 2) ? ["refresh"] : ["refresh", "add"],
        right: ["filter", "search"],
        add: {
          handler: () => {
            addRef.value.open();
          }
        },
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "admin_id",
          align: "center",
          width: "100px",
        },
        {
          title: "用户名",
          dataIndex: "username",
          align: "center",
          width: "100px",
        },
        {
          title: "类型",
          dataIndex: ["type", "label"],
          align: "center",
          width: "100px",
        },
        {
          title: "渠道名称",
          dataIndex: "name",
          align: "center",
          width: "180px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "200px",
        },
      ],
      loading: false,
      searchForm: {
        name: {
          type: "input",
          label: "市区镇",
          attrs: { placeholder: "请输入市区镇" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    //渠道名称
    $getChannelAllList({ "level": 1 }).then((res: any) => {
    })
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new threeLevelChannelService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      addRef.value.close();
      LTableRef.value.$fetchTableData();
    };
    return () => (
      <Page>
        <CardWithTitle title="乡级/街道">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        {
                          !userStore.isSuperAdmin &&  userStore.channel_level > 1 &&
                          <a-button
                            type="primary"
                            size="small"
                            v-slots={{
                              icon: () => <EditOutlined />,
                            }}
                            onClick={() => {
                              addRef.value.open({
                                id: record.id,
                              });
                            }}
                          >
                            编辑
                          </a-button>
                        }
                        {
                           <a-button
                           type="primary"
                           size="small"
                           v-slots={{
                             icon: () => <EditOutlined />,
                           }}
                           onClick={() => {
                             Modal.confirm({
                               title: "提示",
                               content: "是否重置密码?",
                               onOk: () => {
                                 $channelResetPassword({"id":record.admin_id}).then((res:any)=>{
                                   message.success("重置密码成功,初始密码:123456");
                                 }).catch(()=>{
                                   message.success("重置密码失败");
                                 })
                               },
                             });
                            
                           }}
                         >
                         重置密码
                         </a-button>
                        }
                      </div>
                    );
                  }
                  if (column.dataIndex === "type") {
                    return record.type === 1 ? (
                      <div>出单机构</div>
                    ) : (
                      <div>推广机构</div>
                    );
                  }
                  if (column.dataIndex === "status") {
                    return record.status === 1 ? (
                      <div>启用</div>
                    ) : (
                      <div>禁用</div>
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <Add
          ref={addRef}
          service={$service}
          onConfirm={(e) => {
            tableRow(e);
          }}
        />
        <SearchQRcode
          ref={qrcodeRef}
        />
      </Page>
    );
  },
});